<template>
  <el-card 
    class="news-card glass-effect glow-hover" 
    :class="[
      `priority-${article.priority}`,
      { 'featured': article.priority === 'featured' }
    ]"
    shadow="hover"
    @click="handleClick"
  >
    <!-- 优先级标签 -->
    <div v-if="article.priority !== 'normal'" class="priority-badge">
      <el-tag 
        :type="getPriorityStyle(article.priority).type" 
        size="small"
        class="priority-tag"
      >
        {{ getPriorityStyle(article.priority).text }}
      </el-tag>
    </div>

    <!-- 封面图片 -->
    <div class="card-image" v-if="!compact">
      <el-image
        :src="article.coverImage"
        :alt="article.title"
        fit="cover"
        class="cover-image"
        lazy
      >
        <template #placeholder>
          <div class="image-placeholder">
            <el-icon size="32"><Picture /></el-icon>
          </div>
        </template>
        <template #error>
          <div class="image-error">
            <el-icon size="32"><Picture /></el-icon>
          </div>
        </template>
      </el-image>
      
      <!-- 分类标签 -->
      <div class="category-overlay">
        <el-tag 
          :color="getCategoryColor(article.category)" 
          class="category-tag"
          size="small"
        >
          <el-icon class="category-icon">
            <component :is="getCategoryIcon(article.category)" />
          </el-icon>
          {{ article.category }}
        </el-tag>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="card-content">
      <!-- 标题 -->
      <h3 class="article-title" :class="{ 'compact-title': compact }">
        {{ truncateText(article.title, compact ? 50 : 80) }}
      </h3>

      <!-- 摘要 (非紧凑模式显示) -->
      <p v-if="!compact" class="article-summary">
        {{ truncateText(article.summary, 120) }}
      </p>

      <!-- 标签列表 -->
      <div class="article-tags" v-if="!compact">
        <el-tag
          v-for="tag in article.tags.slice(0, 3)"
          :key="tag"
          size="small"
          class="article-tag"
          :style="{ '--tag-color': getRandomColor() }"
        >
          {{ tag }}
        </el-tag>
      </div>

      <!-- 文章元信息 -->
      <div class="article-meta">
        <div class="author-info">
          <el-avatar :size="24" :src="article.author.avatar" />
          <span class="author-name">{{ article.author.name }}</span>
          <span class="author-title">{{ article.author.title }}</span>
        </div>

        <div class="article-stats">
          <time class="publish-time">
            {{ formatRelativeTime(article.publishTime) }}
          </time>
          <span class="reading-time">
            <el-icon><Clock /></el-icon>
            {{ article.readingTime }}分钟
          </span>
        </div>
      </div>

      <!-- 互动数据 -->
      <div class="article-interactions">
        <div class="interaction-item">
          <el-icon><View /></el-icon>
          <span>{{ formatNumber(article.readCount) }}</span>
        </div>
        <div class="interaction-item like-btn" @click.stop="handleLike">
          <el-icon :class="{ 'liked': isLiked }"><View /></el-icon>
          <span>{{ formatNumber(article.likeCount) }}</span>
        </div>
        <div class="interaction-item" @click.stop="handleShare">
          <el-icon><Share /></el-icon>
          <span>分享</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  Picture, Clock, View, Share, 
  Monitor, Connection, TrendCharts, Cpu, Iphone 
} from '@element-plus/icons-vue'
import type { NewsArticle } from '@/types'
import { 
  formatRelativeTime, 
  formatNumber, 
  truncateText, 
  getRandomColor,
  getCategoryColor,
  getCategoryIcon,
  getPriorityStyle,
  copyToClipboard
} from '@/utils'
import { useArticlesStore } from '@/stores/articles'

interface Props {
  article: NewsArticle
  compact?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  compact: false
})

const router = useRouter()
const articlesStore = useArticlesStore()

const isLiked = ref(false)

const handleClick = () => {
  router.push(`/article/${props.article.id}`)
}

const handleLike = async () => {
  if (isLiked.value) return
  
  isLiked.value = true
  await articlesStore.likeArticle(props.article.id)
  
  ElMessage({
    message: '点赞成功！',
    type: 'success',
    duration: 1500
  })
}

const handleShare = async () => {
  const url = `${window.location.origin}/article/${props.article.id}`
  const text = `${props.article.title} - TechNova科技资讯`
  
  if (navigator.share) {
    try {
      await navigator.share({
        title: text,
        url: url
      })
    } catch (error) {
      console.error('分享失败:', error)
    }
  } else {
    const success = await copyToClipboard(url)
    ElMessage({
      message: success ? '链接已复制到剪贴板' : '分享失败',
      type: success ? 'success' : 'error',
      duration: 1500
    })
  }
}
</script>

<style scoped lang="scss">
.news-card {
  cursor: pointer;
  transition: all var(--tech-transition-normal) ease;
  position: relative;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-8px);
    
    .article-title {
      color: var(--tech-accent-neon);
    }
    
    .cover-image {
      transform: scale(1.05);
    }
  }
  
  &.featured {
    border: 2px solid var(--tech-accent-neon);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(57, 255, 20, 0.1));
      pointer-events: none;
      z-index: -1;
    }
  }
  
  :deep(.el-card__body) {
    padding: 0;
  }
}

.priority-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  
  .priority-tag {
    backdrop-filter: blur(8px);
    border: none;
    font-weight: 600;
  }
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  
  .cover-image {
    width: 100%;
    height: 100%;
    transition: transform var(--tech-transition-normal) ease;
  }
  
  .image-placeholder,
  .image-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--tech-bg-secondary);
    color: var(--tech-text-muted);
  }
  
  .category-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    
    .category-tag {
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-weight: 600;
      
      .category-icon {
        margin-right: 4px;
      }
    }
  }
}

.card-content {
  padding: 20px;
}

.article-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--tech-text-primary);
  transition: color var(--tech-transition-normal) ease;
  
  &.compact-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

.article-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tech-text-secondary);
  margin-bottom: 16px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  
  .article-tag {
    background: linear-gradient(135deg, 
      rgba(var(--tag-color), 0.2), 
      rgba(var(--tag-color), 0.1)
    );
    border: 1px solid rgba(var(--tag-color), 0.4);
    color: var(--tech-text-primary);
    transition: all var(--tech-transition-normal) ease;
    
    &:hover {
      background: linear-gradient(135deg, 
        rgba(var(--tag-color), 0.3), 
        rgba(var(--tag-color), 0.2)
      );
      box-shadow: 0 0 8px rgba(var(--tag-color), 0.6);
    }
  }
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  .author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .author-name {
      font-weight: 600;
      color: var(--tech-text-primary);
      font-size: 14px;
    }
    
    .author-title {
      font-size: 12px;
      color: var(--tech-text-muted);
    }
  }
  
  .article-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--tech-text-secondary);
    
    .reading-time {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

.article-interactions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .interaction-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--tech-text-secondary);
    transition: all var(--tech-transition-normal) ease;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    
    &:hover {
      background: rgba(0, 212, 255, 0.1);
      color: var(--tech-accent-neon);
    }
    
    &.like-btn {
      .el-icon.liked {
        color: #ff4757;
        animation: heartbeat 0.6s ease-in-out;
      }
    }
  }
}

// 心跳动画
@keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

// 响应式设计
@media (max-width: 768px) {
  .card-image {
    height: 160px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .article-title {
    font-size: 16px;
  }
  
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .article-interactions {
    .interaction-item {
      font-size: 12px;
      padding: 2px 6px;
    }
  }
}
</style>